<template>
	<view class="content statusBarHeight">
		<view class="navigation_bar">
			<view style='display: flex; align-items: center;'>
				<uni-icons type="back" size="24" color="#3C3C3C" @click='GoBack'></uni-icons>
				<view class="titleName">
					<picker @change="bindPickerChange" :value="index" :range="navList">
						<view class="uni-input">{{navList[index]}}</view>
					</picker>
					<view class="triangle"></view>
				</view>
			</view>

			<view class="leftIcon" v-if="showRight">
				<view class="textBtn" @tap="exchange(index==2?3:index==3?2:'')">
					{{index=='5'?'兑换数字积分':'兑换多多券'}}
				</view>
			</view>
		</view>

		<view class='list'>
			<view class="item" v-for="(item,index) in list" :key="index">
				<!-- <view class="top">
					<view class="title">{{item.recordType}}</view>
					<view class="price" :style="item.changeType == 1?'':'color:#23C87E'">
						{{item.changeType==1?'+':'-'}}{{item.walletNum}}</view>
				</view>
				<view class="top">
					<view class="time">{{item.createTime}}</view>
					<view class="status" :style="item.status==0?'color:#999999':item.status==1?'color:#23C87E':''">
						{{item.status==0?'待审核':item.status==1?'审核通过':'审核驳回'}}</view>
				</view> -->

				<view class="top">
					<view class="title">{{item.recordType}}</view>
					<view class="time">{{item.createTime}}</view>

				</view>
				<view class="top" style='display: flex;justify-content: center;align-items: center;'>
					<view class="price" :style="item.changeType == 1?'':'color:#23C87E'">
						{{item.changeType==1?'+':'-'}}{{item.walletNum}}
					</view>

				</view>
			</view>
			<view class="noneContent" v-if="list.length == 0">
				<image src="../../static/withdraw/noneCard.png" class="noneImg"></image>
				<view class="tips">暂无数据</view>
			</view>
		</view>

		<uni-popup ref='popup' :mask-click="false" type='bottom'>
			<view class="popup">
				<image src="@/static/statc-icon/close.png" class='close' @tap="closeProp" mode=""></image>
				<view class="title">{{popTitle}}</view>
				<view class="numTitle">金额</view>
				<input :placeholder="placeholderText" class="input-prop" placeholder-class="placeholder" type="number"
					v-model="amount" />
				<view class="sures" @tap="sure">确认并支付订单</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		billPage,
		transferToBalance,
		balanceToHappyBean,
		getLockMechanism
	} from '../../api/api.js'
	import {
		throttle
	} from '../../common/common.js'
	export default {
		data() {
			return {
				index: 0,
				navList: ['多多券', '购物券', '兑换券', '兑换积分', '积分', '数字积分', '多贝', '提货券', '释放积分', '助力积分', '生活积分'],
				list: [],
				pageNum: 1,
				pageSize: 20,
				pages: '',
				isProp: false,
				amount: '',
				LockMechanismList: [],
				level: 1
			}
		},
		onLoad(e) {
			this.index = Number(e.index)
			this.level = e.level
		},
		computed: {
			showRight() {
				return [2, 3, 5].includes(this.index)
			},
			popTitle() {
				//index == 0?'':index == 2?'兑换券兑换多多券':''
				if (this.index == 0) {
					return '抵用劵兑换多贝'
				} else if (this.index == 2) {
					return '兑换券兑换多多券'
				} else if (this.index == '5') {
					return '多多券兑换数字积分'
				} else {
					return '兑换积分兑换多多券'
				}
			},
			placeholderText() {
				if (this.index == '5') {
					return '请输入多多券金额'
				} else {
					return '请输入兑换多多券'
				}
			}
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 获取列表
			this.getList()
			// 获取多贝转化金额
			this.getLockMechanism()
		},
		onReachBottom() {
			if (this.pages <= this.pageNum) {
				uni.showToast({
					icon: 'none',
					title: '暂无更多~'
				})
				return
			} else {
				this.pageNum++
				// 获取列表
				this.getList()
			}
		},
		methods: {
			getLockMechanism() {
				let data = {}
				getLockMechanism(data).then(res => {
					this.LockMechanismList = res.data
					console.log(this.LockMechanismList, 'this.LockMechanismListthis.LockMechanismList')
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.pageNum = 1
				this.list = []
				// 获取列表
				this.getList()
			},
			exchange(type) {
				this.amount = ''
				this.$refs.popup.open('bottom')
				// 多多券兑换多贝
				// if( this.index == 0 ) {
				// 	this.LockMechanismList.forEach(item => {
				// 		if( item.level == this.level ) {
				// 			this.amount = item.lockAmount
				// 		}
				// 	})
				// 	let data = {
				// 		amount:this.amount,
				// 	}
				// 	balanceToHappyBean(data).then( res=> {
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:'兑换成功，请等待审核~'
				// 		})
				// 		this.pageNum = 1
				// 		this.list = []
				// 		// 获取列表
				// 		this.getList()
				// 		this.amount = ''
				// 		this.isProp = false
				// 	})
				// }else {
				// 	this.isProp = true
				// }

			},
			closeProp() {
				this.$refs.popup.close()
			},
			// 获取列表
			getList() {
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.index + 1
				}
				billPage(data).then(res => {
					this.list = this.list.concat(res.data.records)
					this.pages = res.data.pages
				})
			},
			// 提交
			sure() {
				if (!this.amount) {
					uni.showToast({
						icon: 'none',
						title: '请输入兑换多多券'
					})
					return false
				}
				let data = {
					amount: this.amount,
				}
				//调用
				// 多多券兑换多贝
				if (this.index == 0) {
					throttle(() => {
						balanceToHappyBean(data).then(res => {
							uni.showToast({
								icon: 'none',
								title: '兑换成功，请等待审核~'
							})
							this.pageNum = 1
							this.list = []
							// 获取列表
							this.getList()
							this.amount = ''
							this.$refs.popup.close()
						})
					}, 5000)

				} else if (this.showRight) { // 兑换积分/兑换卷兑换多多券
					let type = this.index == 3 ? 1 : 2
					if (this.index == 5) {
						//数字积分
						type = 3
					}
					let data = {
						amount: this.amount,
						type // 类型1兑换积分2兑换券
					}
					throttle(() => {
						transferToBalance(data).then(res => {
							uni.showToast({
								icon: 'none',
								title: '兑换成功，请等待审核~'
							})
							this.pageNum = 1
							this.list = []
							// 获取列表
							this.getList()
							this.amount = ''
							this.$refs.popup.close()
						})
					}, 5000)

				}

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #F6F6F7;
	}

	.navigation_bar {
		width: 100vw;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		background: transparent;
		display: flex;
		justify-content: space-between;

		.titleName {
			font-weight: 400;
			font-size: 36rpx;
			color: #3C3C3C;
			display: flex;
			align-items: center;
		}

		.textBtn {
			font-weight: 400;
			font-size: 36rpx;
			color: #23C87E;
		}

	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #A8A8A8;
		border-radius: 100rpx;
		margin-left: 10rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item {
		margin-top: 35rpx;
		padding-bottom: 24rpx;
		width: 690rpx;
		border-bottom: 1rpx solid #F2F2F2;
		display: flex;
		justify-content: space-between;

		.top {
			display: flex;
			flex-direction: column;

			.title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #3C3C3C;
				line-height: 40rpx;
			}


		}

		.price {
			font-family: PingFangSC-Medium, PingFang SC;
			color: #23C87E;
			font-weight: 400;
			font-size: 40rpx;
		}

		.time {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #909090;
			line-height: 33rpx;
		}

		.status {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #23C87E;
			line-height: 33rpx;
		}
	}

	.noneContent {
		display: flex;
		align-items: center;
		flex-direction: column;

		.noneImg {
			margin-top: 132rpx;
			width: 320rpx;
			height: 291rpx;
		}

		.tips {
			margin-top: 36rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #B8B8B8;
			line-height: 33rpx;
		}
	}

	.popup {
		width: 100%;
		height: 448rpx;
		background: #FFFFFF;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		position: relative;

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 26rpx;
			right: 40rpx;
		}

		.title {
			width: 100%;
			height: 88rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #3C3C3C;
			display: flex;
			align-items: center;
			padding: 16rpx 40rpx;
			box-sizing: border-box;
		}

		.numTitle {
			margin-top: 40rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 24rpx;
			color: #757576;
		}

		.input-prop {
			padding: 0 20rpx;
			box-sizing: border-box;
			height: 88rpx;
			background: #F5F5F5;
			margin: 20rpx 40rpx;
			border-radius: 12rpx;
		}

		.sures {
			width: 670rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #FF7A3F 0%, #FC3260 100%);
			border-radius: 112rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			margin-top: 40rpx;
		}
	}
</style>